<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item :title="title_city" @open="open_city" id="city">
            </van-dropdown-item>
            <van-dropdown-item :title="title_state" @open="open_state" id="state">
            </van-dropdown-item>
            <van-dropdown-item :title="title_time" @open="open_time" id="time">
            </van-dropdown-item>
        </van-dropdown-menu>
        <van-popup :show="show_city" round position="bottom" custom-style="height: 30%">
            <van-picker title="城市" :columns="city" show-toolbar @confirm="confirm_city" @cancel="show_city = false" />
        </van-popup>
        <van-popup :show="show_state" round position="bottom" custom-style="height: 30%">
            <van-picker title="状态" :columns="state" show-toolbar @confirm="confirm_state" @cancel="show_state = false" />
        </van-popup>
        <van-popup :show="show_time" round position="bottom" custom-style="height: 30%">
            <van-datetime-picker type="year-month" :value="currentDate" :min-date="minDate" @confirm="confirm_time"
                @cancel="show_time = false" />
        </van-popup>

        <!--  -->
        <div class="header" v-for="(item, index) in game" :key="index" v-if="game.length > 0">
            <van-tag type="danger" size="large" class="tag">{{ item.state }}</van-tag>
            <image :src="item.img" mode="aspectFill" class="game_img"></image>
            <div class="text">
                <span class="title"> {{ item.title }} </span><br>
                <span class="title2">{{ item.city }} | {{ item.opentime | dateFormat }}</span><br>
                <span class="title2" v-if="item.state !== '已结束'">{{ item.endtime | dateFormat }} </span>
                <span class="title2">截至报名</span>
            </div>
        </div>
        <div v-if="game.length == 0">
            <van-empty description="暂无赛事" />
        </div>
    </div>
</template>

<script>
import { dateny, dateFormat, date } from '@/utils/fiters.js'
export default {
    data() {
        return {
            game: [],
            show: false,
            city: [],
            state: ['全部状态', '已结束', '报名中'],
            xzstate: '',
            xzcity: '',
            title_city: '全部城市',
            title_state: '全部状态',
            title_time: '全部时间',
            show_city: false,
            show_state: false,
            show_time: false,
            currentDate: new Date().getTime(),
            minDate: new Date(new Date().getFullYear() - 10, 0, 1).getTime(),
        };
    },
    onLoad() {
        this.getganme();
        this.getcity();
        console.log(dateFormat(1748707200000));
    },
    methods: {
        open_city() {
            this.show_city = true;
            this.title_state = '全部状态'
            this.title_time = '全部时间'
        },
        confirm_city(data) {
            console.log(data,'.data');
            this.selectComponent('#city').toggle()
            this.show_city = false;
            // console.log('-------------', this.city[data.detail.index]);
			console.log('-------------', this.city);
			this.city.map(r=>{
				if(r=data.value){
					this.xzcity=r
				}else{
					          this.xzcity = this.city[data.detail.index]
				}
			})
  
            if (this.xzcity == '全部城市') {
                this.getcity()
                this.getganme()
                this.title_city = '全部城市'
            } else {
                this.request({
                    url: "/game/check",
                    method: "post",
                    data: { city: this.xzcity }
                }).then((res) => {
                    this.game = res.data.data
                    this.getcity()
                    this.title_city = data.detail.value
                    console.log("city2", this.city);
                });
            }
        },
        open_state() {
            this.show_state = true;
            this.title_city = '全部城市'
            this.title_time = '全部时间'
        },
        confirm_state(data) {
            this.selectComponent('#state').toggle()
            this.show_state = false;
            this.xzstate = this.state[data.detail.index]
            console.log('this.xzstate', this.xzstate);
            if (this.xzstate == '全部状态') {
                this.getganme()
                this.title_state = data.detail.value
                console.log('      this.title_state', this.title_state);
            } else {
                this.request({
                    url: "/game/check",
                    method: "post",
                    data: { state: this.xzstate }
                }).then((res) => {
                    this.game = res.data.data
                    console.log("game2", this.game);
                    this.title_state = data.detail.value
                });
            }
        },
        open_time() {
            this.show_time = true;
            this.title_city = '全部城市'
            this.title_state = '全部状态'
        },
        confirm_time(data) {
            this.selectComponent('#time').toggle()
            this.show_time = false;
            console.log('this.xztime', date(data.detail));
            this.request({
                url: "/game/check",
                method: "post",
                data: { opentime: date(data.detail) }
            }).then((res) => {
                this.game = res.data.data
                console.log("game2", this.game);
                this.title_time = dateny(data.detail)
            });
        },
        getganme() {
            this.request({
                url: "/game/list",
                method: "get",
            }).then((res) => {
                this.game = res.data.data;
                console.log("game", this.game);
            });
        },
        getcity() {
            this.request({
                url: "/api/city",
                method: "get",
            }).then((res) => {
                this.citylist = res.data.data;
				console.log(res.data.data,'res.data.data');
                this.city = []
                res.data.data.map(res => {
                    this.city.push(res.city)
                })
                console.log("city", this.city);
            });
        },
    },
};
</script>

<style>
.header {
    width: 95%;
    height: 500rpx;
    position: relative;
    margin: 20rpx;
}

.game_img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.text {
    position: absolute;
    bottom: 0px;
    padding: 20rpx;
    background-color: rgba(0, 0, 0, 0.384);
    width: 100%;
    box-sizing: border-box;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;


}

.title {
    color: aliceblue;
    font-size: 16px;
    font-weight: bold;
}

.title2 {
    color: rgb(255, 255, 255);
    font-size: 14px;
}

.tag {
    position: absolute;
    top: 0px;
    margin: 20rpx;
}

/* .row_item {
    height: 100rpx;
    background-color: beige;
} */

.col_item {
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
    background-color: rgb(231, 97, 220);
}
</style>